$wine = #AF1866
$blue = #1A69B5

user-select(value)
  user-select value
  -webkit-user-select value

/* reset styles */
*
  box-sizing border-box
  margin 0
  padding 0

*:focus
  outline none
  
:link
  color inherit
  text-decoration none

iframe, img
  border none

.lv-player,
.ractive-player
  --lv-aspect-ratio 1.6
  --lv-controls-height 44px
  --lv-elapsed-color $wine
  --lv-scrubber-color $wine
  --lv-scrub-height 6px
  --lv-volume-color $wine
  --lv-buttons-height calc(var(--lv-controls-height) - var(--lv-scrub-height))
  --lv-canvas-height calc(var(--lv-height) - var(--lv-controls-height))
  --lv-height calc(var(--lv-width) / var(--lv-aspect-ratio))

  background-color #000
  position relative
  height var(--lv-height)
  width var(--lv-width)

// backwards compatibility
.ractive-player
  --rp-controls-height var(--lv-controls-height)
  --rp-scrub-height var(--lv-scrub-height)
  --rp-buttons-height var(--lv-buttons-height)
  --rp-height var(--lv-height)
  --rp-width var(--lv-width)

// frame mode
// .lv-player.lv-frame
.lv-player,
.ractive-player
  height 100%
  width 100%
  overflow hidden
  position absolute
  left 0
  top 0

.lv-canvas,
.rp-canvas
  background-color #FFF
  position relative
  user-select none
  // height 100%
  // width 100%
  
// .lv-frame > .lv-canvas
.lv-canvas,
.rp-canvas
  height var(--lv-height)
  width var(--lv-width)

// yikes
.not-ready
  *[data-from-first], *[data-during]
    visibility hidden

@media (min-aspect-ratio: 8/5)
  // :root.lv-frame
  :root
    font-size 2vh

  // .lv-player.lv-frame
  .lv-player
    --lv-width 160vh

    > .lv-canvas
      margin 0 auto
  
  .ractive-player
    --lv-width 160vh

    > .rp-canvas
      margin 0 auto
    
@media (max-aspect-ratio: 8/5)
  // :root.lv-frame
  :root
    font-size 1.25vw

  // .lv-player.lv-frame
  .lv-player
    --lv-width 100vw

    > .lv-canvas
      top calc((100% - 62.5vw) / 2)

  .ractive-player
    --lv-width 100vw

    > .rp-canvas
      top calc((100% - 62.5vw) / 2)

/* control positioning */
.lv-controls,
.rp-controls
  background-color rgba(0, 0, 0, 0.5)
  color #FFF
  height var(--lv-controls-height)
  position absolute
  bottom 0
  left 0
  transition opacity .25s cubic-bezier(0.0,0.0,0.2,1)
  width 100%
  user-select none
  z-index 1000
  
  &.hidden
    opacity 0
    transition opacity .1s cubic-bezier(0.4, 0, 1, 1)

// .lv-frame > .lv-controls
.lv-controls,
.rp-controls
  top calc(50vh + var(--lv-height)/2 - var(--lv-controls-height))
  left calc(50vw - var(--lv-width) / 2)
  width var(--lv-width)

.lv-controls-scrub,
.rp-controls-scrub
  cursor pointer
  height var(--lv-scrub-height)
  // height calc(5.5% / 0.55)
  margin 0 auto
  position relative
  width 97%
  z-index 2

.lv-controls-buttons,
.rp-controls-buttons
  height var(--lv-buttons-height)
  line-height var(--lv-buttons-height)
  margin 0 auto
  width 97%
  
  > *
    display inline-block
    height 100%
    vertical-align top
    
.lv-controls-right,
.rp-controls-right
  float right
  
  > *
    display inline-block
    height 100%
    vertical-align top

.lv-controls-buttons,
.lv-controls-right, .rp-controls-right
.lv-controls-volume
  > button
    background none
    border none
    outline none
    cursor pointer
    opacity .9
    transition opacity .1s cubic-bezier(0.4,0,1,1)
    height 100%
    padding 0
    width 38px
    
    &:hover
      opacity 1
      transition opacity .1s cubic-bezier(0,0,0.2,1)
      
    > svg
      height 100%

// individual controls
.lv-controls-playpause, .lv-controls-fullscreen,
.rp-controls-playpause, .rp-controls-fullscreen
  cursor pointer

@import "controls/captions"
@import "controls/scrubber"
@import "controls/settings"
@import "controls/thumbs"
@import "controls/time"
@import "controls/volume"

// mobile styles
@import "mobile"

// hack to target Safari, which does horrible things without this line
@media not all and (min-resolution:.001dpcm)
  @supports (-webkit-appearance:none)
    *[data-from-first], *[data-during]
      will-change opacity
